<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <div class="card">
        <div class="title">组件样式<text class="ruler">每个尺寸：174*140</text></div>
        <div class="content">
          <div class="main">
            <div class="item" @click="itemClick(0)" :class="{ 'select-view': tabIndex == 0 }">2*2</div>
            <div class="item" @click="itemClick(1)" :class="{ 'select-view': tabIndex == 1 }">2*2</div>
          </div>

          <el-form-item label="文字">
            <div class="sa-flex ">
              <el-input v-model="settingData.data.cardList[tabIndex].txt"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="链接">
            <div class="sa-flex ">
              <el-input v-model="settingData.data.cardList[tabIndex].url"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="是否图片">
              <div class="sa-flex ">
                <el-switch v-model="settingData.data.is_img" :active-value="1" :inactive-value="0"></el-switch>
              </div>
            </el-form-item>
          <template v-if="settingData.data.is_img==1">
            
            <el-form-item label="图片">
              <div class="sa-flex">
                <sa-uploader v-model="settingData.data.img_url" fileType="image"></sa-uploader>
                <div class="tip">建议尺寸：44*44</div>
              </div>
            </el-form-item>
            <el-form-item label="路径">
              <div class="sa-flex ">
                <el-input v-model="settingData.data.path"></el-input>
              </div>
            </el-form-item>
          </template>
          <el-form-item label="上圆角">
            <dc-slider v-model="settingData.data.borderRadiusTop"></dc-slider>
          </el-form-item>
          <el-form-item label="下圆角">
            <dc-slider v-model="settingData.data.borderRadiusBottom"></dc-slider>
          </el-form-item>
          <el-form-item label="间距">
            <dc-slider v-model="settingData.data.space"></dc-slider>
          </el-form-item>
        </div>
      </div>
      <template v-if="tabIndex == 0&&settingData.data.is_img==0">
        <dc-goods-select v-model="settingData.data.goodsList" :multiple="true" max="2" :tag="tag"></dc-goods-select>
      </template>

      <template v-if="tabIndex == 1">
        <dc-list v-model="settingData.data.list" :itemProp="{
          src: '',
          title: {
            text: '',
            color: '#333',
          },
          tip: {
            text: '',
            color: '#bbb',
          },
          url: '',
          badge: {
            show: 0,
            text: '',
            color: '#FFFFFF',
            bgColor: '#FF6000',
          },
        }">
          <template #title>图标设置1111</template>
          <template #listItem="{ element }">
            <el-form-item label="图标">
              <div class="sa-flex">
                <sa-uploader v-model="element.src" fileType="image"></sa-uploader>
                <div class="tip">建议尺寸：44*44</div>
              </div>
            </el-form-item>
            <el-form-item label="标题">
              <dc-text-color v-model="element.title" placeholder="请输入标题" maxlength="4" show-word-limit></dc-text-color>
            </el-form-item>
            <el-form-item label="功能提示">
              <dc-text-color v-model="element.tip" placeholder="请输入功能提示" maxlength="4" show-word-limit></dc-text-color>
            </el-form-item>
            <el-form-item label="链接">
              <dc-url v-model="element.url"></dc-url>
            </el-form-item>
            <el-form-item label="标签">
              <el-switch v-model="element.badge.show" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <template v-if="element.badge.show">
              <el-form-item label="标签内容">
                <dc-text-color v-model="element.badge" placeholder="请输入标签内容" maxlength="4"
                  show-word-limit></dc-text-color>
              </el-form-item>
              <el-form-item label="标签背景">
                <dc-color-picker v-model="element.badge.bgColor"></dc-color-picker>
              </el-form-item>
            </template>
          </template>
        </dc-list>
      </template>
    </template>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue';
import dcGoodsSelect from '../../common/dc-goods-select.vue';
import dcSlider from '../../common/dc-slider.vue';
import dcList from '../../common/dc-list.vue';
import dcUrl from '../../common/dc-url.vue';
import dcTextColor from '../../common/dc-text-color.vue';

const tag = ref('promotionCard')

const props = defineProps(['settingData', 'tabType']);

const tabIndex = ref(0)

const itemClick = (index) => {
  tabIndex.value = index;
}

onMounted(() => {
  console.log('promotionCard.props.settingData:', props.settingData.data.is_img)
})

</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: center;
  align-content: center;
  margin-bottom: 16px;

  .item {
    height: 100px;
    width: 100px;
    background: rgba(128, 106, 246, 0.3);
    display: flex;
    align-content: center;
    justify-content: center;
    line-height: 100px;
    border: 1px solid #806AF6;
  }

  .select-view {
    background: #806AF6;
    border: none;
  }
}

.ruler {
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;


  color: #999999;
}
</style>